<template>
 <div class="vehicle">
    <!-- 搜索 -->
    <el-card class="card1">
      <el-form label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="车辆类型：">
              <el-select
                v-model="form.truckTypeId"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in option"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车牌号码：">
              <el-input
                v-model="form.licensePlate"
                placeholder="请输入车牌号码"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button class="btn1" @click="getCarList">搜索</el-button>
            <el-button class="btn2" @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
   <!--选择栏-->
   <el-tabs type="border-card" v-model="activeName" @tab-click="handleTabClick">
    <el-tab-pane
          :label="'全部' + (+count[0] + +count[1])"
          name="all"
        ></el-tab-pane>
        <el-tab-pane :label="'可用' + count[1]" name="can"></el-tab-pane>
        <el-tab-pane :label="'停用' + count[0]" name="stop"></el-tab-pane>
    </el-tabs>
  <!-- 列表 -->
    <el-card class="card2">
      <el-button class="btn1" @click="handleDialog">新增车辆</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
        stripe
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="licensePlate" label="车牌号码">
        </el-table-column>
        <el-table-column prop="truckTypeName" label="车辆类型">
        </el-table-column>
        <el-table-column prop="driverNum" label="司机数量"> </el-table-column>
        <el-table-column prop="workStatus" label="车辆状态">
          <template #default="{ row }">
            <el-row type="flex" align="middle">
              <div
                :class="{ green: row.workStatus, red: !row.workStatus }"
              ></div>
              <span>{{ row.workStatus === 1 ? "可用" : "停用" }}</span>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column prop="deviceGpsId" label="GPS设备ID">
        </el-table-column>
        <el-table-column prop="allowableLoad" label="实载重量（T）">
        </el-table-column>
        <el-table-column prop="allowableVolume" label="实载体积（方）">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template #default="{row}">
            <el-row type="flex" justify="space-around">
              <el-link :underline="false" type="primary">
                <router-link :to="`/transit/vehicle-detail/${row.id}`" style="color:cornflowerblue;"
                >查看详情
              </router-link>
              </el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link
              :underline="false" type="primary"
              @click="deactivate(row.id)"
              v-if="row.workStatus === 1"
              >停用
            </el-link>
            <el-link
            :underline="false" type="primary"
              @click="available(row.id)"
              v-if="row.workStatus === 0"
              style="color: #42b983"
              >启用
            </el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link :underline="false" type="danger">配置司机</el-link>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="form.total"
      >
      </el-pagination>
    </el-card>
 <!-- 新增弹层 -->
 <el-dialog title="新增车辆" :visible.sync="showDialog" @close="close">
      <el-form label-width="130px" :model="formData" :rules="rules" ref="formRef">
        <el-form-item label="车辆类型" prop="truckTypeId">
          <el-select
            v-model="formData.truckTypeId"
            placeholder="请输入车辆类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in option"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码" prop="licensePlate">
          <el-input v-model="formData.licensePlate" placeholder="请输入车牌号码">
          </el-input>
        </el-form-item>
        <el-form-item label="GPS设备ID" prop="deviceGpsId">
          <el-input v-model="formData.deviceGpsId" placeholder="请输入GPS设备ID">
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-row type="flex" justify="center">
          <el-button class="btn1" @click="submit">确定</el-button>
          <el-button class="btn2" @click="close">取消</el-button>
        </el-row>
      </template>
    </el-dialog>
      <!--启用弹层-->
      <DialogPage :deactivate-dialog.sync="stopDialog">
      <template #header>
        <span>车辆启用</span>
      </template>
      <template #confan>
        <span> 确定要启用吗？车辆启用需满足以下条件：</span>
      </template>
      <template #center>
        <el-col>1车辆信息已完善</el-col>
        <el-col>2绑定司机>=2,且有排班</el-col>
      </template>
    </DialogPage>
    <!--停用弹层-->
    <DialogPage :deactivate-dialog.sync="deactivateDialog">
      <template #header>
        <span>车辆停用</span>
      </template>
      <template #confan>
        <span style="font-size: 16px"> 确定要停用吗？车辆停用需满足以下条件</span>
      </template>
      <template #center>
        <el-col>1车辆当前无运输任务</el-col>
        <el-col>2车辆无关联运输线路</el-col>
      </template>
      <template #footer>
        <span style="color: orangered; font-size: 14px">
          注：停用后司机将自动解除绑定
        </span>
      </template>
    </DialogPage>
  </div>
</template>

<script>
import { getCarListApi, getPage, addCarApi, getTruckTypeApi } from '@/api/vihicle'
import DialogPage from '@/views/cars/components/dialog.vue'
export default {
  name: 'VehiCle',
  components: { DialogPage },
  data () {
    return {
      option: [],
      num: {},
      value: null,
      showDialog: false,
      deactivateDialog: false,
      stopDialog: false,
      tableData: [],
      activeName: 'all',
      activeVal: 0,
      form: {
        page: 1,
        pageSize: 10,
        total: 0,
        truckTypeId: '',
        licensePlate: '' // 车牌
      },
      count: {}, // 每个状态多少数据
      rules: {
        truckTypeId: [
          { required: true, message: '车辆类型不能为空', trigger: 'blur' }
        ],
        licensePlate: [
          { required: true, message: '车牌号码不能为空', trigger: 'blur' }
        ],
        deviceGpsId: [
          { required: true, message: 'GPS设备ID不能为空', trigger: 'blur' }
        ]
      },
      formData: {
        truckTypeId: '',
        licensePlate: '',
        deviceGpsId: ''
      }
    }
  },
  created () {
    this.getCarList()
    this.getTruckType()
    this.getPage()
  },
  methods: {
    async getCarList () {
      const res = await getCarListApi(this.form)
      // console.log(res)
      this.tableData = res.data.items ? res.data.items : []

      this.form.total = +res.data.counts
    },
    // 分页
    async getPage () {
      const res = await getPage()
      console.log(res)
      this.count = res.data
    },
    handleSizeChange (newpageSize) {
      this.form.pageSize = newpageSize
      this.getCarList()
    },
    // 第几页
    handleCurrentChange (newCurrent) {
      if (+this.count[0] === this.form.total) {
        // console.log(this.count[0]);
        this.form.page = newCurrent
        this.form.workStatus = 0
        this.getCarList()
      } else if (+this.count[1] === this.form.total) {
        this.form.page = newCurrent
        this.form.workStatus = 1
        this.getCarList()
      } else {
        this.form.page = newCurrent
        this.getCarList()
      }
    },
    reset () {
      this.form.truckTypeName = ''
      this.form.licensePlate = ''
      this.getCarList()
    },
    // 搜索数据
    async getTruckType () {
      const res = await getTruckTypeApi()
      console.log(res)
      res.data.forEach((item) => {
        this.option.push(item)
      })
    },
    // tab切换
    async handleTabClick (tab) {
      console.log(tab)
      if (tab.index === '0') {
        this.form = {
          page: 1,
          pageSize: 10,
          total: 0,
          truckTypeId: '',
          licensePlate: '', // 车牌
          status: ''
        }
        this.getCarList()
      } else if (tab.index === '1') {
        this.form = {
          page: 1,
          pageSize: 10,
          total: 0,
          truckTypeId: '',
          licensePlate: '', // 车牌
          status: ''
        }
        const res = await getCarListApi({ ...this.form, workStatus: 1 })
        console.log(res)
        this.form.total = +res.data.counts
        this.tableData = res.data.items
      } else if (tab.index === '2') {
        this.form = {
          page: 1,
          pageSize: 10,
          total: 0,
          truckTypeId: '',
          licensePlate: '', // 车牌
          status: ''
        }
        const res = await getCarListApi({ ...this.form, workStatus: 0 })
        console.log(res)
        this.form.total = +res.data.counts
        console.log(res.data.page)
        this.tableData = res.data.items
      }
    },
    handleDialog () {
      this.showDialog = true
    },
    close () {
      this.$refs.formRef.resetFields()
      this.form = {
        truckTypeName: '',
        licensePlate: '',
        deviceGpsId: '',
        page: 1,
        pageSize: 10
      }
      this.showDialog = false
      this.getCarList()
    },
    async submit () {
      await this.$refs.formRef.validate()
      await addCarApi(this.formData)
      this.$message.success('新增车辆成功')
      this.close()
    },
    // 停用
    deactivate (id) {
      console.log(id)
      this.deactivateDialog = true
    },
    // 可用
    available (id) {
      console.log(id)
      this.stopDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
.vehicle {
  padding: 20px;
  background-color: #f3f4f7;
  padding-top: 23px;

  ::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 0;
  }
  ::v-deep .card1 {
  margin-bottom: 20px;
  .el-card__body {
    padding-top: 20px;
    padding-left: 0;
    .el-row {
      margin: 0 !important;
      .el-col {
        padding-left: 30px;
        padding-right: 30px;
      }
      .el-button {
        width: 90px;
        padding: 10px 20px;
        border-radius: 5px;
      }
    }
    .el-form-item__label {
      color: #20232a;
      font-weight: 400;
      text-align: right;
      padding-left: 10px;
      box-sizing: border-box;
      white-space: nowrap;
    }
  }
}
}
.btn1{
      background-color: #E15536;
      color: #ffffff;
      height: 40px;
      width: 100px;
      border-radius: 5px;
      font-weight: 400;
}
.btn2{
      height: 40px;
      color: #2a2929;
      border: 1px solid #d8dde3;
      border-radius: 5px;
      font-weight: 400;
      width: 100px;
}
::v-deep .card2 {
  margin-top: 20px;
  .el-button {
    margin-bottom: 20px;
    width: 100px;
    height: 40px;
    color: #fff;
  }
  .el-card__body {
    padding: 28px 28px 28px 28px;
    .el-table {
      border: 1px solid #ebeef5;
      thead tr th {
        background: #f8faff;
      }
    }
  }
  .el-pagination {
    margin: 20px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #20232a;
    font-size: 14px;
  }
  .green {
    background-color: green;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
  }
  .red {
    background-color: red;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
  }
}
::v-deep .el-dialog {
  width: 600px;
  transform: none;
  left: 0;
  position: relative;
  margin: auto;
  border-radius: 8px;
  .el-dialog__header {
    padding: 15px 30px 15px;
    background-color: #f3f4f7;
    border-radius: 8px 8px 0 0;
  }
  .el-dialog__body {
    padding: 40px 60px 0;
    padding-left: 0;
  }
  .el-input__suffix-inner {
    span {
      color: rgb(32, 35, 42);
      font-weight: 400;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      margin-right: 14px;
      line-height: 40px;
    }
  }
}
</style>
